<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.current{
				background: yellow;
			}
		</style>
	</head>

	<body>
		<!--
			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
			
		-->
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">从小到大</button>
		<table border="1" cellspacing="0" cellpadding="10">
			<theader>
				<tr>
					<th>序列号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
					<th>选择</th>
				</tr>
			</theader>
			<tbody>
				
			</tbody>
			<tfooter>
				
			</tfooter>
		</table>
		<script type="text/javascript">
			var info = [
					{ name: "胡杭", age: 16 },
					{ name: "胜明", age: 22 },
					{ name: "军毅", age: 21 },
					{ name: "晓华", age: 13 },
					{ name: "盛聪", age: 23 },
					{ name: "侦剑", age: 32 },
					{ name: "红翔", age: 25 },
					{ name: "超维", age: 18 },
					{ name: "士琪", age: 22 },
					{ name: "艳华", age: 20 }
				];
			//添加
			var add_btn = document.querySelector(".add");
			//删除选中
			var del_btn_all = document.querySelector(".del");
			//排序
			var sort_btn = document.querySelector(".sort");
			//表格内容部分
			var tbody = document.querySelector("tbody");
			//下标值
			var sub = 0;
			
			
			
			/***************添加***************/
			add_btn.onclick = function(){
				if(sub>info.length-1){
					sub = 0;					
				}
				
				//创建新tr
				var new_tr = document.createElement("tr");
				//给新的tr添加内容
			    new_tr.innerHTML = "<td>"+(sub+1)+"</td>"+"<td>"+info[sub].name+"</td>"+"<td>"+info[sub].age+"</td>"+"<td><button>删除</button></td>"+"<td><button>选择</button></td>";
			    //在父节点下插入
			    tbody.appendChild(new_tr);
			    
				//选中所有tr
				var tbody_tr = document.querySelectorAll("tr");
				//给每个tr加上onclick="del(this)"和"selected(this)",绑定一个属性index，赋值为i
				for(var i = 1; i < tbody_tr.length; i++) {
					tbody_tr[i].index = i;
					tbody_tr[i].children[3].setAttribute("onclick", "del(this)");
					tbody_tr[i].lastElementChild.children[0].setAttribute("onclick", "selected(this)");
				}

				sub++;
			}
			
			
			/***************删除***************/
			del_btn_all.onclick  = function(){
				var current_tr = document.querySelectorAll(".current");
				for(var i = 0;i<current_tr.length;i++){
					current_tr[i].remove();
				}
				sub = tbody.children.length-1;
			}
			
			
			/***************排序***************/
			console.log(tbody.children[0].innerHTML);
			sort_btn.onclick =function(){
				for(var i = 1;i<tbody.children.length;i++){
					for(var j = i+1;j<tbody.children.length;j++){
						if(tbody.children[i].children[2].innerText>tbody.children[j].children[2].innerText){
							var temp = tbody.children[i].innerHTML;
							tbody.children[i].innerHTML = tbody.children[j].innerHTML;
							tbody.children[j].innerHTML = temp;
						}
					}
				}
				for(var i = 1;i<tbody.children.length;i++){
					tbody.children[i].children[0].innerText = i;
				}
			}
			
			//删除本体
			function del(ele){
				ele.parentNode.remove();
			}
			//选择取消
			function selected(ele){
				ele.parentNode.parentNode.classList.toggle("current");
					if(ele.parentNode.parentNode.className == "current"){
						ele.innerHTML = "取消";
					}
					else{
						ele.innerHTML = "选择";
				}
			}
		</script>
	</body>

</html>